﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/echarts.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
<div class="container-div" id="machineEff-vue">
    <!-- 条件搜索区 -->
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-select placeholder="请选择查询机床" v-model="checkDevice">
                    <el-option v-for="item in deviceList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="10">
                <el-date-picker v-model="timeValue"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" icon="el-icon-search" round v-on:click="Search">搜索</el-button>
            </el-col>
        </el-row>
    </div>
    <!-- Echarts图表区 -->
    <div id="myecharts">

    </div>
</div>

<script>
    let app = new Vue({
        el: '#machineEff-vue',
        data: {
            checkDevice: "Lathe01",
            deviceList: [
                { label: "机床1", value: "Lathe01" },
                { label: "机床2", value: "Lathe02" },
                {label:"机床3",value:"Lathe03"}
            ],
            timeValue: null,
            searchStart: null,
            searchEnd: null,
            mychart: null,
        },
        methods: {
            // 搜索
            Search() {
                this.mychart.showLoading()
                const _start = this.timeValue[0];
                const _end = this.timeValue[1];
                this.searchStart = _start.getFullYear() + "-" + (_start.getMonth() + 1) + "-" + _start.getDate();
                this.searchEnd = _end.getFullYear() + "-" + (_end.getMonth() + 1) + "-" + _end.getDate();
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetDeviceHistory")'
                axios.get(url, {
                    params: {
                        deviceCode: this.checkDevice,
                        stime: this.searchStart,
                        etime: this.searchEnd
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.result != null && res.data.result!=[]) {
                        this.historyDataFactory(res.data.result);
                    }
                    this.mychart.hideLoading();
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！获取历史数据失败：' + err,
                        type: 'error',
                        offset: 80
                    })
                    this.mychart.hideLoading();
                })
            },
            // 数据处理
            historyDataFactory(data) {
                let data1 = [];
                let data2 = [];
                let data3 = [];
                let data4 = [];
                let data5 = [];
                if (data.length == 0) {
                    // 就一个状态
                    const end = this.timeValue[1].getFullYear() + "-" + (this.timeValue[1].getMonth() + 1) + "-" + this.timeValue[1].getDate();
                    const today = new Date();
                    const todayEnd = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
                    if (end == todayEnd) {
                        // 结束时间为当前时刻
                        let stime = this.timeValue[0].getTime();
                        let end = new Date().getTime();
                        data1.push([stime, end, 2]);
                    } else {
                        // 结束时间为选择的时间
                        let stime = this.timeValue[0].getTime();
                        let end = this.timeValue[1].getTime();
                        data1.push([stime, end, 2]);
                    }
                } else {
                    // 查看第一个数据是否为搜索起始时间的前一天
                    let stime = null;
                    let etime = null;
                    for (let i = 0; i < data.length; i++) {
                        if (i + 1 != data.length) {
                            stime = new Date(data[i].OccurTime.split(".")[0]);
                            etime = new Date(data[i + 1].OccurTime.split(".")[0]);
                            switch (data[i].StatusCode) {
                                case 1: {
                                    if (data1.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data1[data1.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data1[data1.length - 1][1] = etime;
                                        } else {
                                            data1.push([stime, etime, 2]);
                                        }
                                    } else {
                                        data1.push([stime, etime, 2]);
                                    }
                                    break;
                                }
                                case 2: {
                                    if (data2.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data2[data2.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data2[data2.length - 1][1] = etime;
                                        } else {
                                            data2.push([stime, etime, 1]);
                                        }
                                    } else {
                                        data2.push([stime, etime, 1]);
                                    }
                                    break;
                                }
                                case 3: {
                                    if (data3.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data3[data3.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data3[data3.length - 1][1] = etime;
                                        } else {
                                            data3.push([stime, etime, 1]);
                                        }
                                    } else {
                                        data3.push([stime, etime, 1]);
                                    }
                                    break;
                                }
                                case 4: {
                                    if (data4.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data4[data4.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data4[data4.length - 1][1] = etime;
                                        } else {
                                            data4.push([stime, etime, 1]);
                                        }
                                    } else {
                                        data4.push([stime, etime, 1]);
                                    }
                                    break;
                                }
                                case 5: {
                                    if (data5.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data5[data5.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data5[data5.length - 1][1] = etime;
                                        } else {
                                            data5.push([stime, etime, 2]);
                                        }
                                    } else {
                                        data5.push([stime, etime, 2]);
                                    }
                                    break;
                                }
                            }
                        }
                    }
                }
                console.log(data1,data2,data3,data4,data5)
            },
        },
        filters: {
        },
        mounted() {
            this.mychart = echarts.init(document.getElementById("myecharts"));
        }
    })
</script>

